<template>
  <div class="right-sidebar" :class="{ expanded: expandedPanel }">
    <div class="sidebar-icons">
      <div 
        class="icon-item" 
        :class="{ active: activePanel === 'ai' }"
        @click="togglePanel('ai')"
        title="AI助手"
      >
        <i class="el-icon-magic-stick"></i>
      </div>
      
      <div 
        class="icon-item" 
        @click="handleWechatCopy"
        title="复制到公众号"
      >
        <i class="el-icon-chat-dot-round"></i>
      </div>
      
      <div 
        class="icon-item" 
        @click="handleZhihuCopy"
        title="复制到知乎"
      >
        <i class="el-icon-s-opportunity"></i>
      </div>
      
      <div
        class="icon-item"
        :class="{ active: activePanel === 'style' }"
        @click="togglePanel('style')"
        title="样式"
      >
        <i class="el-icon-brush"></i>
      </div>

      <div
        class="icon-item"
        :class="{ active: activePanel === 'collection' }"
        @click="togglePanel('collection')"
        title="合集"
      >
        <i class="el-icon-folder-opened"></i>
      </div>

      <div
        class="icon-item"
        :class="{ active: activePanel === 'settings' }"
        @click="togglePanel('settings')"
        title="设置"
      >
        <i class="el-icon-setting"></i>
      </div>
    </div>
    
    <!-- AI面板 -->
    <div class="sidebar-panel" :class="{ active: activePanel === 'ai' }">
      <div class="panel-header">
        <h3>AI助手</h3>
        <i class="el-icon-close" @click="closePanel"></i>
      </div>
      <div class="panel-content ai-panel-content">
        <AIAssistant />
      </div>
    </div>
    
    <!-- 样式面板 -->
    <div class="sidebar-panel" :class="{ active: activePanel === 'style' }">
      <div class="panel-header">
        <h3>样式设置</h3>
        <i class="el-icon-close" @click="closePanel"></i>
      </div>
      <div class="panel-content">
        <div class="style-panel">
          <div class="form-section">
            <label class="form-label">样式选择</label>
            <el-select v-model="currentStyle" placeholder="选择样式" @change="changeStyle" size="mini">
              <el-option label="默认样式" value="default"></el-option>
              <el-option label="简洁样式" value="simple"></el-option>
              <el-option label="优雅样式" value="elegant"></el-option>
              <el-option label="科技样式" value="tech"></el-option>
            </el-select>
          </div>
          
          <div class="form-section">
            <label class="form-label">样式代码</label>
            <el-input
              type="textarea"
              v-model="styleContent"
              :rows="15"
              placeholder="输入CSS样式代码..."
              @input="updatePreview"
              size="mini"
            ></el-input>
          </div>
          
          <div class="form-section">
            <el-button type="primary" @click="saveStyle" size="mini">保存样式</el-button>
            <el-button @click="resetStyle" size="mini">重置</el-button>
          </div>
        </div>
      </div>
    </div>

    <!-- 合集面板 -->
    <div class="sidebar-panel" :class="{ active: activePanel === 'collection' }">
      <div class="panel-header">
        <h3>合集管理</h3>
        <i class="el-icon-close" @click="closePanel"></i>
      </div>
      <div class="panel-content">
        <CollectionPanel @collection-changed="handleCollectionChanged" />
      </div>
    </div>

    <!-- 设置面板 -->
    <div class="sidebar-panel" :class="{ active: activePanel === 'settings' }">
      <div class="panel-header">
        <h3>系统设置</h3>
        <i class="el-icon-close" @click="closePanel"></i>
      </div>
      <div class="panel-content">
        <el-form label-width="80px" size="mini">
          <el-form-item label="主题">
            <el-select v-model="settings.theme" placeholder="选择主题">
              <el-option label="浅色" value="light"></el-option>
              <el-option label="深色" value="dark"></el-option>
            </el-select>
          </el-form-item>
          
          <el-form-item label="字体大小">
            <el-slider v-model="settings.fontSize" :min="12" :max="20" :step="1"></el-slider>
          </el-form-item>
          
          <el-form-item label="自动保存">
            <el-switch v-model="settings.autoSave"></el-switch>
          </el-form-item>
          
          <el-form-item label="保存间隔">
            <el-select v-model="settings.autoSaveInterval" :disabled="!settings.autoSave">
              <el-option label="30秒" :value="30"></el-option>
              <el-option label="1分钟" :value="60"></el-option>
              <el-option label="2分钟" :value="120"></el-option>
            </el-select>
          </el-form-item>
          
          <el-form-item>
            <el-button type="primary" @click="saveSettings" size="mini">保存设置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import AIAssistant from '@/components/ai/AIAssistant'
import CollectionPanel from '@/components/collection/CollectionPanel'

export default {
  name: 'RightSidebar',

  components: {
    AIAssistant,
    CollectionPanel
  },
  
  data() {
    return {
      activePanel: null,
      expandedPanel: false,
      settings: {
        theme: 'light',
        fontSize: 14,
        autoSave: true,
        autoSaveInterval: 30
      },
      currentStyle: 'default',
      styleContent: '',
      defaultStyles: {
        default: `/* 默认样式 */
.markdown-body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  line-height: 1.6;
  color: #24292e;
  word-wrap: break-word;
}

.markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4, .markdown-body h5, .markdown-body h6 {
  margin-top: 24px;
  margin-bottom: 16px;
  font-weight: 600;
  line-height: 1.25;
}

.markdown-body h1 {
  font-size: 2em;
  border-bottom: 1px solid #eaecef;
  padding-bottom: 0.3em;
}

.markdown-body p {
  margin-bottom: 16px;
}`,
        simple: `/* 简洁样式 */
.markdown-body {
  font-family: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  line-height: 1.8;
  color: #333;
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.markdown-body h1, .markdown-body h2, .markdown-body h3 {
  color: #111;
  margin: 2em 0 1em;
  font-weight: 500;
}

.markdown-body h1 {
  font-size: 1.8em;
  border-bottom: 2px solid #eee;
  padding-bottom: 0.5em;
}

.markdown-body p {
  margin: 1em 0;
  text-align: justify;
}`,
        elegant: `/* 优雅样式 */
.markdown-body {
  font-family: 'Source Serif Pro', 'Times New Roman', serif;
  line-height: 1.75;
  color: #2c3e50;
  background: #fff;
  max-width: 700px;
  margin: 0 auto;
  padding: 40px 20px;
}

.markdown-body h1, .markdown-body h2, .markdown-body h3 {
  font-family: 'Source Sans Pro', sans-serif;
  color: #34495e;
  margin: 2.5em 0 1.5em;
  font-weight: 300;
}

.markdown-body h1 {
  font-size: 2.2em;
  text-align: center;
  border-bottom: 1px solid #ecf0f1;
  padding-bottom: 0.8em;
  margin-bottom: 1.5em;
}

.markdown-body p {
  margin: 1.2em 0;
  text-indent: 2em;
}`,
        tech: `/* 科技样式 */
.markdown-body {
  font-family: 'Fira Code', 'Consolas', monospace;
  line-height: 1.6;
  color: #e6e6e6;
  background: #1e1e1e;
  padding: 30px;
  border-radius: 8px;
}

.markdown-body h1, .markdown-body h2, .markdown-body h3 {
  color: #569cd6;
  margin: 1.5em 0 1em;
  font-weight: 600;
}

.markdown-body h1 {
  font-size: 2em;
  border-bottom: 1px solid #3e3e42;
  padding-bottom: 0.5em;
}

.markdown-body p {
  margin: 1em 0;
  color: #d4d4d4;
}

.markdown-body code {
  background: #252526;
  color: #569cd6;
  padding: 2px 6px;
  border-radius: 3px;
}`
      }
    }
  },
  
  mounted() {
    // 从本地存储加载设置和样式
    this.loadSettings()
    this.loadStyles()
  },
  
  methods: {
    togglePanel(panel) {
      if (this.activePanel === panel) {
        this.closePanel()
      } else {
        this.activePanel = panel
        this.expandedPanel = true
      }
    },
    
    closePanel() {
      this.activePanel = null
      this.expandedPanel = false
    },
    
    async handleWechatCopy() {
      this.$emit('copy-wechat')
    },
    
    async handleZhihuCopy() {
      this.$emit('copy-zhihu')
    },
    
    loadSettings() {
      const saved = localStorage.getItem('chengzhang-settings')
      if (saved) {
        try {
          this.settings = { ...this.settings, ...JSON.parse(saved) }
        } catch (error) {
          console.error('加载设置失败:', error)
        }
      }
    },
    
    saveSettings() {
      localStorage.setItem('chengzhang-settings', JSON.stringify(this.settings))
      this.$message.success('设置已保存')
      this.closePanel()
      
      // 通知父组件设置已更新
      this.$emit('settings-changed', this.settings)
    },
    
    changeStyle(styleName) {
      this.currentStyle = styleName
      this.styleContent = this.defaultStyles[styleName] || this.defaultStyles.default
      this.updatePreview()
    },
    
    updatePreview() {
      // 通知父组件样式已更新
      this.$emit('style-changed', this.styleContent)
    },
    
    saveStyle() {
      const savedStyles = JSON.parse(localStorage.getItem('chengzhang-styles') || '{}')
      savedStyles[this.currentStyle] = this.styleContent
      localStorage.setItem('chengzhang-styles', JSON.stringify(savedStyles))
      localStorage.setItem('chengzhang-current-style', this.currentStyle)
      this.$message.success('样式已保存')
      this.updatePreview()
    },
    
    resetStyle() {
      this.styleContent = this.defaultStyles[this.currentStyle] || this.defaultStyles.default
      this.updatePreview()
      this.$message.info('样式已重置')
    },
    
    loadStyles() {
      const savedStyles = JSON.parse(localStorage.getItem('chengzhang-styles') || '{}')
      this.currentStyle = localStorage.getItem('chengzhang-current-style') || 'default'
      this.styleContent = savedStyles[this.currentStyle] || this.defaultStyles[this.currentStyle] || this.defaultStyles.default

      // 初始化时应用样式
      this.$nextTick(() => {
        this.updatePreview()
      })
    },

    // 处理合集变化事件
    handleCollectionChanged() {
      // 通知父组件合集数据已更新
      this.$emit('collection-changed')
    }
  }
}
</script>

<style lang="scss" scoped>
.right-sidebar {
  position: relative;
  display: flex;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-left: 1px solid rgba(232, 232, 232, 0.8);
  box-shadow: -2px 0 10px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  
  &.expanded {
    width: 300px;
  }
  
  &:not(.expanded) {
    width: 48px;
  }
}

.sidebar-icons {
  width: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 0;
  background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%);
  border-right: 1px solid rgba(232, 232, 232, 0.8);
}

.icon-item {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  color: #666;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(232, 232, 232, 0.8);
  
  &:hover {
    background: linear-gradient(135deg, #409eff 0%, #36cfc9 100%);
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
  }
  
  &.active {
    background: linear-gradient(135deg, #409eff 0%, #36cfc9 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(64, 158, 255, 0.2);
  }
  
  &:last-child {
    margin-bottom: 0;
  }
  
  i {
    font-size: 18px;
  }
}

.sidebar-panel {
    width: 252px;
    height: 100%;
    display: none;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.98);
    
    &.active {
      display: flex;
    }
    
    .panel-header {
      padding: 16px;
      border-bottom: 1px solid rgba(232, 232, 232, 0.8);
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%);
      
      h3 {
        margin: 0;
        font-size: 16px;
        font-weight: 600;
        color: #333;
      }
      
      i {
        cursor: pointer;
        color: #999;
        transition: color 0.3s ease;
        
        &:hover {
          color: #409eff;
        }
      }
    }
    
    .panel-content {
      flex: 1;
      padding: 16px;
      overflow-y: auto;
      
      &.ai-panel-content {
        padding: 0;
        height: calc(100vh - 120px);
        
        .ai-assistant {
          height: 100%;
        }
      }
      
      .style-panel {
        .form-section {
          margin-bottom: 16px;
          
          &:last-child {
            margin-bottom: 0;
          }
          
          .form-label {
            display: block;
            margin-bottom: 8px;
            font-size: 13px;
            font-weight: 500;
            color: #606266;
          }
          
          .el-select,
          .el-textarea {
            width: 100%;
          }
          
          .el-button {
            margin-right: 8px;
            
            &:last-child {
              margin-right: 0;
            }
          }
        }
      }
    }
  }

// 响应式设计
@media (max-width: 768px) {
  .right-sidebar {
    &.expanded {
      width: 100%;
      position: absolute;
      right: 0;
      top: 0;
      bottom: 0;
      z-index: 1000;
    }
  }
}
</style>